<template>
  <div class="materials">
    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>正在加载视频...</p>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="error-container">
      <p>{{ error }}</p>
      <button @click="handleRetry">重试</button>
    </div>

    <!-- 视频列表 -->
    <div v-if="videoList.length && !isLoading && !error" class="video-list">
      <!-- 视频选择器 -->
      <div class="video-selector">
        <div
          v-for="video in videoList"
          :key="video.videoId"
          class="video-item"
          :class="{ active: currentVideo?.videoId === video.videoId }"
          @click="selectVideo(video)"
          @error="handleRetry"
        >
          <h4>{{ video.title }}</h4>
          <div class="video-item-info">
            <span>{{ video.quality.toUpperCase() }}</span>
            <span>{{ formatDuration(video.duration) }}</span>
            <span>{{ formatFileSize(video.fileSize) }}</span>
          </div>
        </div>
      </div>

      <!-- 视频播放区域 -->
      <div v-if="currentVideo" class="video-container">
        <h3>{{ currentVideo.title }}</h3>
        <video
          ref="videoPlayer"
          class="video-player"
          controls
          :src="currentVideo.downloadUrl"
        >
          您的浏览器不支持 HTML5 视频播放
        </video>
        <div class="video-info">
          <p>时长: {{ formatDuration(currentVideo.duration) }}</p>
          <p>格式: {{ currentVideo.format }}</p>
          <p>质量: {{ currentVideo.quality.toUpperCase() }}</p>
          <p>文件大小: {{ formatFileSize(currentVideo.fileSize) }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getVideoList } from '@/api/video'

interface VideoData {
  videoId: string
  title: string
  duration: number
  format: string
  quality: string
  fileSize: number
  downloadUrl: string
  expireTime: number
}

const videoList = ref<VideoData[]>([])
const currentVideo = ref<VideoData | null>(null)
const videoPlayer = ref<HTMLVideoElement | null>(null)
const isLoading = ref<boolean>(false)
const error = ref<string | null>(null)

// 选择视频
const selectVideo = (video: VideoData) => {
  currentVideo.value = video
  // 重置视频播放器
  if (videoPlayer.value) {
    videoPlayer.value.currentTime = 0
  }
}

// 获取视频列表
const fetchVideoList = async () => {
  // isLoading.value = true
  // error.value = null
  const res = await getVideoList()
  if (!res?.data?.length) {
    throw new Error('视频列表为空')
  }
  videoList.value = res.data
  // 默认选择第一个视频
  currentVideo.value = res.data[0]
  console.log('视频数据加载成功:', res.data)
}

// 在组件挂载时自动获取视频列表
onMounted(() => {
  fetchVideoList()
})

// 格式化视频时长
const formatDuration = (seconds: number): string => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 格式化文件大小
const formatFileSize = (bytes: number): string => {
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  if (bytes === 0) return '0 Byte'
  const i = Math.floor(Math.log(bytes) / Math.log(1024))
  return `${Math.round(bytes / Math.pow(1024, i))} ${sizes[i]}`
}

// 处理重试
const handleRetry = () => {
  window.location.reload()
}
</script>

<style scoped lang="scss">
.materials {
  width: 100%;
  height: 100%;
  padding: 20px;

  .loading-container {
    text-align: center;
    padding: 40px;

    .loading-spinner {
      width: 40px;
      height: 40px;
      margin: 0 auto 16px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #409eff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    p {
      color: #666;
    }
  }

  .error-container {
    text-align: center;
    padding: 40px;

    p {
      color: #f56c6c;
      margin-bottom: 16px;
    }

    button {
      padding: 8px 16px;
      background: #409eff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;

      &:hover {
        background: #66b1ff;
      }
    }
  }

  .video-list {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;

    .video-selector {
      width: 300px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      overflow-y: auto;
      max-height: 600px;

      .video-item {
        padding: 16px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: #f5f7fa;
        }

        &.active {
          background: #ecf5ff;
          border-left: 4px solid #409eff;
        }

        h4 {
          margin: 0 0 8px;
          font-size: 16px;
          color: #333;
        }

        .video-item-info {
          display: flex;
          gap: 12px;
          font-size: 12px;
          color: #666;

          span {
            background: #f5f7fa;
            padding: 2px 6px;
            border-radius: 4px;
          }
        }
      }
    }

    .video-container {
      flex: 1;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      padding: 20px;

      h3 {
        margin: 0 0 16px;
        font-size: 20px;
        color: #333;
      }

      .video-player {
        width: 100%;
        border-radius: 4px;
        background: #000;
      }

      .video-info {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #eee;

        p {
          margin: 8px 0;
          color: #666;
          font-size: 14px;
        }
      }
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
